import { doFetch } from '@/utils/doFetch';
import { ifdiffes } from '@/utils/time';
import { useModel } from '@umijs/max';
import { useRequest } from 'ahooks';
import { message, theme, Tooltip } from 'antd';
import dayjs from 'dayjs';
import { useMemo } from 'react';
import Action from '../Action';
import './index.less';
import { items } from '@/utils/global';
import SvgDot from '../SvgDot';


function ItemCard(props) {
  const { item, refresh, bg, hideDot, style = {} } = props;

  const { token } = theme.useToken();

  const { colorText, colorBgCard } = token;

  const {
    initialState: { currentUser, curpro },
    setInitialState
  } = useModel('@@initialState');

  const { run, loading } = useRequest(
    (params) => {
      return doFetch(params);
    },
    {
      manual: true,
      onSuccess: (res) => {
        if (res.code === 0) {
          refresh?.();
          message.success("操作成功")
        }

      },
    },
  );

  const isMine = currentUser?.id === item.userId;

  const tipColor = useMemo(() => {
    const ifshowstype = ifdiffes(
      dayjs(dayjs(item?.planEnd ?? dayjs().add('day', -1)).format('YYYY-MM-DD') + ' 18:00:00'),
      dayjs(),
      currentUser,
      item,
    );
    if (ifshowstype) {
      if (currentUser.waringType === true) {
        if (ifshowstype === 'overtime') {
          return 'rgba(255, 0, 0, 0.2)';
        } else {
          return 'rgba(255, 165, 0, 0.5)';
        }
      } else {
        if (ifshowstype === 'overtime') {
          return 'rgba(255, 0, 0, 0.2)';
        } else {
          return 'rgba(255, 165, 0, 0.5)';
        }
      }
    }
    return null;
  }, [currentUser?.waringType, currentUser?.waringTime, item]);


  return (
    <div
      className={`itemcard`}
      style={{
        '--bgs': bg ? bg : colorBgCard,
        color: colorText,
        position: 'relative',
        boxSizing: 'border-box',
        ...style
      }}
    >
      <div className="spread">
        <div className="center">
          {!hideDot &&
            <SvgDot style={{ marginRight: 5, flexShrink: 0,marginTop:-1 }} size={12} placement="bottomLeft" color={items[item?.status]?.color} title={items[item?.status]?.statusName} />
          }
          <div
            className='center'
            style={{
              width: '100%',
              wordBreak: 'break-all',
              flex: 1
            }}
          >
            <span style={{ fontSize: 12, color: '#999', paddingRight: 6 }}>
              {item?.missionNo ?? "-"}
            </span>
            {!curpro?.id && (
              <span style={{ fontSize: 12, color: '#999', paddingLeft: 6, flex: 1 }} className='oneline'>
                {item.projectName ?`项目:${item.projectName}`: ""}
              </span>
            )}
          </div>
        </div>
        {!curpro?.id && (
          <span style={{ fontSize: 12, color: items[item?.status]?.color, paddingLeft: 6}} className='oneline'>
            {items[item?.status]?.statusName}
          </span>
        )}
      </div>
      <div style={{ height: 36, fontSize: 14,lineHeight:"34px" }} className='centerl'>
        <Tooltip title={item?.missionName} placement='bottomLeft' arrow={false}>
          <b className='oneline'>{item?.missionName}</b>
        </Tooltip>
      </div>
      <Action token={token} {...props} run={run} loading={loading} isMine={isMine} tipColor={tipColor} />
    </div>

  );


}

export default ItemCard;
